// 轮播图

import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useState, useRef } from 'react'
import { Carousel } from 'antd';
import img1 from '@/public/image/Carousel1.webp'
import img2 from '@/public/image/Carousel2.webp'
import img3 from '@/public/image/Carousel3.webp'
import img4 from '@/public/image/Carousel4.webp'

const HomeCarousel = () => {

    let imagesUrl: any = [
        { img: img1 },
        { img: img2 },
        { img: img3 },
        { img: img4 }
    ]


    let carousel: any = useRef(null)

    let [show, setShow] = useState(false)

    const handlePrevClick = () => {
        if (carousel.current) {
            carousel.current.prev();
        }
    };

    const handleNextClick = () => {
        if (carousel.current) {
            carousel.current.next();
        }
    };

    const handleMouseEnter = () => {
        setShow(true);
    };

    const handleMouseLeave = () => {
        setShow(false);
    };

    return (
        <div
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            className='Recommended_Carousel'>
            <Carousel ref={carousel} autoplay>
                {
                    imagesUrl.map((item: any) => (
                        <img src={item.img} key={item.img} alt="" />
                    ))
                }
            </Carousel>
            {
                show ?
                    <>
                        {/* 左滚动按钮 */}
                        <button onClick={handlePrevClick} className='Carousel_left'>
                            <LeftOutlined />
                        </button>

                        {/* 右滚动按钮 */}
                        <button onClick={handleNextClick} className='Carousel_right'>
                            <RightOutlined />
                        </button>
                    </> : ''
            }
        </div>
    )
}

export default HomeCarousel